*{
  ul,ol,li{
    list-style: none;
  }
}
nav>.row .col-lg-1{
  visibility:visible; 
}
// section{
//   height: 0;
//   width:0;

// >.row>.col-lg-2{
//   position:absolute;;
//   background-color: #fff;
//   border:1px solid #FF6A00;
//   >li{
//     color:#333;
//     >i{
//       color:#ccc;
//     }
//   }
// }
// }
main{
  background-color: #F5F5F5;
  padding:20px 0;
  >div:first-child{
    width:100%;
    height:41px;
    padding:0 18.5px;
    color:rgb(117, 117, 117);
    line-height: 41px;
    font-size: 12px;
    span{
      cursor: pointer;
      &:hover{
        color:#FF6A00;
      }
    }
  }
  >div:nth-child(2){
    height:84px;
    padding:0 18.5px;
    background-color: #fff;
    display: flex;
    line-height: 84px;
    justify-content: space-between;
    >.left{
      width:124px;
      color:#aaa;
    }
    >.center{
      width:1042px;
      padding-right:20px;
      position: relative;
      >li{
        cursor: pointer;
        float: left;
        width:145px;
        height:84px;
        line-height: 84px;
        &:hover{
          color:#FF6A00;
        }
        &.active{
          color:#FF6A00;
        }
      }
      &.active{
        height:360px;
      }
    }
    >.right{
      width:60px;
      cursor: pointer;
    }
  }
  >div:nth-child(3){
    height: 100px;
    padding:0 18.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >.left{
      width:371px;
      height:24px;
      display: flex;
      >div{
        border-right:1px solid rgb(224, 224, 224);
        flex:1;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        &:last-child{
          border:none;
        }
        &.active,&:hover{
          color:#FF6A00;
        }
      }
    }
    >.right{
      width:470px;
      height:30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      >div{
        display: flex;
        align-items: center;
        cursor: pointer;
        >input{
          width:18px;
          height:18px;
          border-radius: 0;
          outline: none;
        }
        &:hover{
          color:#FF6A00;
        }
      }
      >button{
        border:1px solid rgb(227, 227, 227);
        border-radius: 0;
        outline: none;
        background-color: #fff;
        width:110px;
        height:30px;
        padding:0 14px;
        font-size: 14px;
        cursor: pointer;
        &:hover{
          color:#FF6A00
        }
      }
      >label{
        display: flex;
        align-items: center;
        cursor: pointer;
        color:#333;
        >input{
          width:18px;
          height:18px;
          border-radius: 0;
          outline: none;
          pointer-events: none;
        }
        &:hover{
          color:#FF6A00;
        }
      }
    }
  }
  >ul{
    padding:0 18.5px 0  60px;
    display: flex;
    flex-wrap: wrap;
    >li{
      width:23%;
      height:430px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding:47px 0;
      background-color: #fff;
      margin-right: 20px;
      align-items: center;
      transition: 0.3s;
      margin-bottom: 20px;
      cursor: pointer;
      *{
        pointer-events: none;
      }
      &:hover{
        -webkit-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        -moz-box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        box-shadow: 0px 14px 15px 0px rgba(204,204,204,1);
        p{
          color:#FF6A00;
        }
      }
      >img{
        width:200px;
        height:200px;
      }
      >div:first-of-type{
        text-align: center;
        >p{
          text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
          width:150px;
        }
        span{
          color:#FF6A00;
          font-size: 13px;
        }
        del{
          color:#999;
          font-size: 13px;
        }
      }
      >div:last-of-type{
        >span{
          padding:0 2px;
        }
        >.hot{
          background-color: #EC4C40;
          color:#fff;
        }
        >.sale{
          background-color: #EBAB00;
          color: #fff;
        }
      }
      >div{
        >img{
          height:18px;
        }
      }
    }
  }
  >div:last-child{
    height:30px;
    display: flex;
    justify-content: center;
    margin:20px 0;
    >li{
      box-sizing: content-box;
      width:48px;
      height:24px;
      margin:0 5px;
      padding:3px 0;
      line-height: 24px;
      text-align: center;
      font-size: 24px;
      cursor: pointer;
      &:not(.disabled):hover{
        background-color: #B0B0B0;
        color:#fff;
      }
      &.active{
        color:#fff;
        background-color: rgb(117, 117, 117);
      }
    }
  }
}
